<template>
  <el-select
    :value="value"
    clearable
    :placeholder="configData.placeholder"
    :multiple="configData.multiple"
    :filterable="configData.filterable"
    @change="onchange"
  >
    <el-option
      v-for="option in options"
      :key="option.value"
      :label="option.label"
      :value="option.value"
    />
  </el-select>
</template>
<script>
// import {requestAPI} from '@/lib/commonMixin'
import { commonData } from '@/utils/cache'

export default {
  name: 'SelectXH',
  model: {
    prop: 'value',
    event: 'change'
  },
  props: ['defaultValue', 'configData', 'value'],
  data() {
    return {
      options: []
    }
  },
  computed: {
    enumList: function() {
      return commonData.enumList
    },
    configOptions: function() {
      return this.configData.options
    }
  },
  watch: {
    'enumList': function() {
      if (!this.configData.commonData) return
      this.options = this.enumList[this.configData.commonData]
    },
    'configOptions': function() {
      if (Array.isArray(this.configOptions)) {
        this.options = this.configOptions
      }
    }
  },
  created() {
    const option = this.configData.options
    if (this.configData.commonData) {
      this.options = commonData.enumList[this.configData.commonData]
      return
    }
    if (!option) {
      console.error('select options must is api of obj and ary!')
    } else {
      if (Array.isArray(option)) {
        this.options = option
      } else if (option.url) {
        // const params = this.configData.params || {}
        // requestAPI(option, params).then(data => {
        //   if (this.configData.adaperCallback) {
        //     this.options = this.configData.adaperCallback(data)
        //   } else {
        //     this.options = data.list || data
        //   }
        // })
      }
    }
  },
  methods: {
    onchange(e) {
      this.$emit('change', e)
    }
  }
}
</script>

<style scoped>

</style>
